<template>
    <div class="layout-body-main" :style="styles">
        <slot></slot>
    </div>
</template>
<script lang="ts">
export default {
  name: "LayoutBody",
};
</script>
<script lang="ts" setup>
import { computed, StyleValue } from 'vue';

const props = withDefaults(
  defineProps<{
    height?: string | boolean;
  }>(),
  {
    height: false,
  }
);

const styles = computed<StyleValue>(()=>{
    return [
        props.height? `height:calc(${props.height} - 42px)`:''
    ];
})
</script>
<style scoped>
.layout-body-main{
    padding: 20px;
    border: 1px solid var(--el-border-color-lighter);
    background: var(--el-bg-color-overlay);
    border-radius: 2px;
}
</style>